<template>
    <view class="order-detail position-r">
        <view class="order-detail__bg bg-main position-a full-w"></view>
        
        <view class="order-detail__header box pd-t-54 pd-v-24 flex flex-center position-r" v-if="detail.status == 2">
              
            <u-icon name="checkmark-circle" size="20" color="#fff"></u-icon>

            <view class="flex-1 mr-l-14">
                <view class="color-white font40 lh-56 bold">
                    已完成
                </view>
                <view class="font24 lh-34 color-white">
                    充电已完成，请尽快移位
                </view>
                  
                  
            </view>
              
        </view>

        
        <view class="order-detail__header box pd-t-54 pd-v-24 flex flex-center position-r" v-if="detail.status == 1">
              
              <u-icon name="checkmark-circle" size="20" color="#fff"></u-icon>
  
              <view class="flex-1 mr-l-14">
                  <view class="color-white font40 lh-56 bold">
                      充电中
                  </view>
                    
                    
              </view>
                
          </view>
          
        
        <view class="order-detail__body pd-v-24 mr-t-16 position-r" >
            <view class="pd-v-24 pd-h-24 border8 bg-white mr-t-16" v-if="detail.status == 2">
                <view class="flex flex-center">
                    <view class="flex-1 font36 lh-50 color-default bold">
                        充电费
                    </view>
                    <view class="font28 lh-40 color-main">
                        ￥{{detail.orderAmount || 0}}
                    </view>
                      
                </view>

                <view class="color-info font26 lh-36 mr-t-8 mr-b-20"> 
                    {{detail.storeName}}
                </view>
                  

                <view class="border-t border-b mr-t-20 pd-t-20">
                    
                    <view class="flex mr-b-28">
                        <view class="font28 lh-40 color-default mr-r-24" style="width:120rpx">
                            充电度数
                        </view>
                        <view class="flex-1 font28 lh-40 color-info">
                            {{detail.chargingCapacity}}度
                        </view>
                    </view>
                    
                    <view class="flex mr-b-28">
                        <view class="font28 lh-40 color-default mr-r-24" style="width:120rpx">
                            充电金额
                        </view>
                        <view class="flex-1 font28 lh-40 color-info">
                            <!-- ¥{{(detail.electricity || 0) + (detail.serviceCharge || 0)}} -->
                            ¥ {{ detail.orderAmount || 0 }}
                        </view>
                    </view>
                    
                    <view class="flex mr-b-28">
                        <view class="font28 lh-40 color-default mr-r-24" style="width:120rpx">
                            电费
                        </view>
                        <view class="flex-1 font28 lh-40 color-info">
                            ¥{{ detail.electricity || 0}}
                        </view>
                    </view>
                    
                    <view class="flex mr-b-28">
                        <view class="font28 lh-40 color-default mr-r-24" style="width:120rpx">
                            服务费
                        </view>
                        <view class="flex-1 font28 lh-40 color-info">
                            ¥{{detail.serviceCharge || 0}}
                        </view>
                    </view>
                  
                </view>

                <view class="flex flex-center mr-t-28">
                    <view class="flex-1 font28 lh-40 color-default">
                        实付金额
                    </view>
                    <view class="font28 lh-40 color-default">
                        ￥{{ detail.payAmount || 0 }}
                    </view>
                      
                </view>
                  
            </view>


            <view class="pd-v-24 pd-h-24 border8 bg-white mr-t-16" v-if="detail.status == 1">
                <view class="flex flex-center">
                    <view class="flex-1 font36 lh-50 color-default bold">
                        充电费
                    </view>
                    <view class="font28 lh-40 color-main">
                        ￥{{ detail.orderAmount || 0}}
                    </view>
                      
                </view>

                <view class="color-info font26 lh-36 mr-t-8 mr-b-20"> 
                    {{detail.storeName}}
                </view>
                  

                <view class="border-t mr-t-20 pd-t-20">
                    
                    <view class="flex mr-b-28">
                        <view class="font28 lh-40 color-default mr-r-24" style="width:120rpx">
                            充电度数
                        </view>
                        <view class="flex-1 font28 lh-40 color-default">
                            {{detail.chargingCapacity || 0}}度
                        </view>
                    </view>
                    
                </view>
                  
            </view>


            <view class="pd-v-24 pd-h-24 border8 bg-white mr-t-16">
                <view class="flex flex-center">
                    <view class="flex-1 font34 lh-48 color-default bold">
                        充电信息
                    </view>
                      
                </view>

                <view class="flex mr-t-28">
                    <view class="font26 lh-36 color-default mr-r-24">
                        订单编号
                    </view>
                    <view class="flex-1 font28 lh-40 color-info">
                        {{detail.orderNumber}}
                    </view>
                </view>
                
                <view class="flex mr-t-28">
                    <view class="font26 lh-36 color-default mr-r-24">
                        设备信息
                    </view>
                    <view class="flex-1 font28 lh-40 color-info">
                        {{detail.deviceInfo}}{{detail.phoneNumber ? '('+detail.phoneNumber+')' : ''}}
                    </view>
                </view>
                
                <view class="flex mr-t-28">
                    <view class="font26 lh-36 color-default mr-r-24">
                        开始时间
                    </view>
                    <view class="flex-1 font28 lh-40 color-info">
                        {{detail.startTime}}
                    </view>
                </view>

                <view class="flex mr-t-28">
                    <view class="font26 lh-36 color-default mr-r-24">
                        完成时间
                    </view>
                    <view class="flex-1 font28 lh-40 color-info">
                        {{detail.endTime || '-'}}
                    </view>
                </view>
                
                <view class="flex mr-t-28">
                    <view class="font26 lh-36 color-default mr-r-24">
                        充电时长
                    </view>
                    <view class="flex-1 font28 lh-40 color-info">
                        {{detail.chargingDuration || 0}}分钟
                    </view>
                </view>
                
                <view class="flex mr-t-28">
                    <view class="font26 lh-36 color-default mr-r-24">
                        充电模式
                    </view>
                    <view class="flex-1 font28 lh-40 color-main">
                        {{detail.chargeMode ==  1 ? '充满自停' :  detail.chargeMode == 2 ? '定额充电' : ''}}
                    </view>
                </view>
                
                <view class="flex mr-t-28">
                    <view class="font26 lh-36 color-default mr-r-24">
                        支付模式
                    </view>
                    <view class="flex-1 font28 lh-40 color-info">
                        {{detail.payType == 1 ? '微信信用支付' :detail.payType == 2 ? '钱包支付' : ''}}
                    </view>
                </view>
                
                <view class="flex mr-t-28">
                    <view class="font26 lh-36 color-default mr-r-24">
                        支付状态
                    </view>
                    <view class="flex-1 font28 lh-40 color-info">
                        <template v-if="detail.payType == 1">
                            {{detail.payStatus == 0 ? '待支付' :  detail.payStatus == 1 ? '已支付' : ''}}
                        </template>
                        <template v-else>
                          {{detail.payStatus == 0 ? '待支付' :  detail.payStatus == 1 ? '已支付' : ''}}
                        </template>
                    </view>
                </view>
                  
                  
            </view>
            
              
        </view>

        
        <view class="order-detail__footer full-w box pd-v-76 mr-t-40" v-if="detail.payStatus == 0">
            
            <u-button type="primary" shape="circle" color="#35BE65" :text="'待支付 ¥'+ (detail.orderAmount || 0)" @click="payment"></u-button>
        </view>

        
        
        <view class="order-detail__footer full-w box pd-v-76 mr-t-40" v-if="detail.status == 1">
            
            <u-button type="primary" shape="circle" color="#35BE65" text="结束充电" @click="endCharge"></u-button>
        </view>
          
    </view>
</template>

<script setup>
import { useStore } from '@/store/index.js';
import { ref, reactive, onMounted,defineProps } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { orderQueryById } from '@/api/user.js'

import { walletBalance,chargingDetails,endCharging } from '@/api/user.js'

const store = useStore();
const props = defineProps({
    id: {
        type: String,
        default: ''
    }
})
const detail = ref({})

onShow(() => {
    
})

onLoad(() => {
    getOrderQueryById()

})

const getOrderQueryById = () => {
    orderQueryById({
        id: props.id
    }).then(res => {
        console.log(res);
        if(res.code == 200) {
            detail.value = res.data

        }
    })
}


const endCharge = () => {
    uni.showModal({
        title: '结束充电',
        content: '确定要结束充电吗？',
        success: (res) => {
            if (res.confirm) {
                uni.showLoading({
                    title: '正在结束充电'
                })

                endCharging({orderId:props.id}).then(res => {
                    uni.hideLoading()
                    if(res.code == 200) {
                        
                        uni.showToast({
                            title: '结束充电成功',
                            mask:true,
                            duration:1000,
                            success: function () {
                                uni.navigateBack({
                                    delta: 1,
                                });
                            }
                        })
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        })
                    }
                }).catch(err => {
                    uni.showToast({
                        title: '结束充电失败',
                        icon:'none'
                    })
                })
            }
        }
    })
}


const payment = () => { 
    console.log('payment')
}



</script>

<style scoped lang="scss">
.order-detail {
    background:#F7F7F7;
    min-height:100vh;
    padding-bottom:100rpx;

    
    .order-detail__bg {
            
        height: 240rpx;
        z-index: 1;
        left:0;
        top:0;
    }


    .order-detail__header {
        z-index: 2;
    }

    .order-detail__body {
        z-index: 2;

        .border-t {
            border-top:1px solid #f1f1f1;
        }

        .border-b {

            border-bottom:1px solid #f1f1f1;
        }
    }
}
</style>
